<template>
  <div>
    <component :is="currentView"></component>
    <button @click="handleChangeView('A')">切换到A</button>
    <button @click="handleChangeView('B')">切换到B</button>
    <button @click="handleChangeView('C')">切换到C</button>
    <button @click="handleChangeView('D')">切换到D</button>
    <br/>
    <component :is="currView"></component>
  </div>  
</template>
<script>
var Home = {
  template: '<p>Welcome home !</p>'
}
export default {
  data(){
    return {
      currentView: 'comA',
      currView:Home,
    }
  },
  methods:{
    handleChangeView(comp){
      this.currentView = 'com' + comp;
    }
  },
  components:{
    comA:{
      template: '<div>组件A</div>'
    },
    comB:{
      template: '<div>组件B</div>'
    },
    comC:{
      template: '<div>组件C</div>'
    },
    comD:{
      template: '<div>组件D</div>'
    }
  }
}
</script>
<style scoped>

</style>


